<template>
  <el-card
    body-class="!p-0 relative"
    class="video-card cursor-pointer transition-transform duration-500 !hover:shadow-[0_2px_12px_0_rgb(0_0_0_/_15%)]"
  >
    <div class="video-operation">
      <!-- <div>
        <el-button type="primary" text bg v-if="detail?.status === AiVideoStatusEnum.IN_PROGRESS">
          生成中
        </el-button>
        <el-button text bg v-else-if="detail?.status === AiVideoStatusEnum.SUCCESS">
          已完成
        </el-button>
        <el-button type="danger" text bg v-else-if="detail?.status === AiVideoStatusEnum.FAIL">
          异常
        </el-button>
      </div> -->
      <!-- 操作区 -->
      <div class="bg-#00000080 rounded-8px operation-button">
        <el-button
          class="btn"
          text
          :icon="Download"
          @click="handleButtonClick('download', detail)"
        />
        <!-- <el-button
          class="btn"
          text
          :icon="RefreshRight"
          @click="handleButtonClick('regeneration', detail)"
        /> -->
        <el-button class="btn" text :icon="Delete" @click="handleButtonClick('delete', detail)" />
        <!-- <el-button class="btn" text :icon="More" @click="handleButtonClick('more', detail)" /> -->
      </div>
    </div>
    <div class="video-wrapper" ref="cardVideoRef" @click="previewVideo(detail?.videoUrl)">
      <div v-if="detail?.videoUrl" class="video-play">
        <div class="bg-#00000080 rounded-100% h-66px w-66px flex justify-center items-center">
          <Icon icon="fa-solid:play" :size="26" color="#fff" />
        </div>

        <!-- <el-icon color="#ffffffc7" size="60"><VideoPlay /></el-icon> -->
      </div>
      <el-image v-if="detail?.coverUrl" class="video" :src="detail?.coverUrl" fit="cover" />
      <video v-else class="absolute wh-full z-1 object-cover" :src="detail?.videoUrl"></video>
      <div v-if="detail?.status === AiVideoStatusEnum.FAIL"> 视频生成失败 </div>
    </div>
    <!-- Midjourney 专属操作 -->
    <!-- <div class="video-mj-btns">
      <el-button
        size="small"
        v-for="button in detail?.buttons"
        :key="button"
        class="min-w-40px ml-0 mr-10px mt-5px"
        @click="handleMidjourneyBtnClick(button)"
      >
        {{ button.label }}{{ button.emoji }}
      </el-button>
    </div> -->
  </el-card>
</template>
<script setup lang="ts">
import { Delete, Download, More, RefreshRight, VideoPlay } from '@element-plus/icons-vue'
import { VideoVO } from '@/api/ai/video'
import { PropType } from 'vue'
import { ElLoading, LoadingOptionsResolved } from 'element-plus'
import { AiVideoStatusEnum } from '@/views/ai/utils/constants'

const message = useMessage() // 消息

const props = defineProps({
  detail: {
    type: Object as PropType<VideoVO>,
    require: true,
    default() {
      return {}
    }
  }
})

const cardVideoRef = ref<any>() // 卡片 video ref
const cardVideoLoadingInstance = ref<any>() // 卡片 video ref

/** 处理点击事件  */
const handleButtonClick = async (type, detail: VideoVO) => {
  emits('onBtnClick', type, detail)
}

/** 处理 Midjourney 按钮点击事件  */
const handleMidjourneyBtnClick = async (button: any) => {
  // 确认窗体
  await message.confirm(`确认操作 "${button.label} ${button.emoji}" ?`)
  emits('onMjBtnClick', button, props.detail)
}

const emits = defineEmits(['onBtnClick', 'onMjBtnClick', 'previewVideo']) // emits

/** 监听详情 */

watch(
  () => props.detail,
  async (newVal: any, oldVal) => {
    await handleLoading(newVal.status as number)
  }
)
const previewVideo = (videoUrl) => {
  if (!videoUrl) return
  emits('previewVideo', videoUrl)
}
/** 处理加载状态 */
const handleLoading = async (status: number) => {
  console.log(status, '---status')

  // 情况一：如果是生成中，则设置加载中的 loading
  if (status === AiVideoStatusEnum.IN_PROGRESS) {
    cardVideoLoadingInstance.value = ElLoading.service({
      target: cardVideoRef.value,
      text: '生成中...'
    } as LoadingOptionsResolved)
    // 情况二：如果已经生成结束，则移除 loading
  } else {
    if (cardVideoLoadingInstance.value) {
      cardVideoLoadingInstance.value.close()
      cardVideoLoadingInstance.value = null
    }
  }
}

/** 初始化 */
onMounted(async () => {
  await handleLoading(props.detail.status as number)
})
</script>

<style scoped lang="scss">
.video-card {
  position: relative;
  display: flex;
  width: 258px;
  height: auto;
  border: 0;
  border-radius: 10px;
  box-shadow: unset;
  flex-direction: column;

  .video-operation {
    position: absolute;
    right: 4px;
    bottom: 3px;
    z-index: 12;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .btn {
      padding: 10px;
      margin: 0;
      //border: 1px solid red;
      color: #fff;
    }
  }

  .operation-button {
    backdrop-filter: blur(16px);

    :deep() {
      .el-button.is-text:not(.is-disabled):hover {
        background: #000000b8;
      }
    }
  }

  .video-wrapper {
    position: relative;
    width: 258px;
    height: 258px;
    overflow: hidden;
    flex: 1;

    .video-play {
      position: absolute;
      z-index: 10;
      display: flex;
      width: 100%;
      height: 100%;
      // background-color: rgb(0 0 0 / 38%);
      justify-content: center;
      align-items: center;

      .el-icon {
        transition: color 0.3s;
      }

      &:hover {
        .el-icon {
          color: #fff;
        }
      }
    }

    .video {
      width: 100%;
      height: 100%;
    }
  }

  .video-mj-btns {
    display: flex;
    width: 100%;
    margin-top: 5px;
    flex-flow: row wrap;
    justify-content: flex-start;
  }
}
</style>
